<template>
  <div class="element-library-lib-preview" @click.self="selectItemHandler(null)">
    <template v-if="hasChildren">
      <ElementLibraryPreviewItem v-for="item in previewList"
                                :selected="isSelected(item)"
                                :open-folder="openFolder"
                                :item="item"
                                :key="item.id"/>
    </template>
    <div v-else class="tw-h-full tw-w-full tw-flex tw-justify-center tw-items-center">
    </div>
  </div>
</template>

<script>

  import ElementLibraryPreviewItem from "./ElementLibraryPreviewItem.vue";

  export default {
    name: "ElementLibraryFilePreview",
    components: {ElementLibraryPreviewItem},
    inject: ["selectItemHandler"],
    props: {
      previewList: Array,
      selectItem: Object,
      openFolder: Object,
    },
    data() {
      return {
        // 选择项的中间替代
        previewFolder: null
      }
    },
    computed: {
      hasChildren() {
        return this.previewList?.length;
      }
    },
    methods: {
      isSelected(item) {
        return this.selectItem?.id === item.id;
      }
    }
  }
</script>

<style scoped>
  .element-library-lib-preview {
    margin: 0.25rem 0.5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 110%;
    flex: 110%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    overflow: auto;
    background-color: var(--bg-color6);
    padding: 0.5rem;
  }
</style>